<template>
  <div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>用户列表</span>
        <el-button style="float: right; padding: 3px 0" type="text" @click="dialogVisible=true">添加</el-button>
      </div>
      <el-dialog title="新增用户" :visible.sync="dialogVisible">
        <user-add></user-add>
      </el-dialog>
      <div class="text item">
        <el-table :data="userlist" style="width: 80%" :row-class-name="tableRowClassName" max-height="500" @row-click="rowClick">
          <el-table-column fixed prop="id" label="ID" width="50"></el-table-column>
          <el-table-column prop="用户名" label="用户名"></el-table-column>
          <el-table-column prop="工作组" label="工作组"></el-table-column>
          <el-table-column prop="用户状态" label="用户状态">
            <template scope="scope">
              {{ scope.row.用户状态 | userStatusFilter }}
            </template>
          </el-table-column>
          <el-table-column prop="入职时间" label="入职时间"></el-table-column>
          <el-table-column fixed="right" label="操作" width="100" class="operation">
            <template slot-scope="scope">
              <el-button @click="handleEidt(scope.row.id)" type="text" size="small">编辑</el-button>
              <el-button @click="handleDel(scope.row.id)" type="text" size="small">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

      </div>
    </el-card>
    <router-view></router-view>
  </div>
</template>

<script>
// 引入辅助函数
import {mapState, mapActions, mapGetters} from "vuex";
import UserAdd from "./UserAdd";

export default {
  components: {UserAdd},
  data() {
    return {
      dialogVisible:false,
      // userStatus: '正常',
    };
  },
  filters: {
    userStatusFilter: function (value) {
      switch (value) {
        case 1:
          return '在职';
        case 2:
          return '见习';
        case 0:
          return '离职';
        default:
          return "未知状态";
      }
    }
  },
  // created() {
  //   // console.log("create")
  //
  //   // this.getUserStatusList();
  //
  //   this.$store.dispatch('getUserList')
  //   // console.log(this.userStatusList[0].userStatus)
  //
  //   // this.getUserList()
  //   // // this.tableData = this.$store.state.userList
  //   // console.log('----userlist----')
  //   // console.log(this.$store.state.userList)
  // },
  mounted() {
    this.getUserList();
  },
  // mounted() {
  //   // this.$store.dispatch('GET_USERLIST').then(() => {
  //   //   // console.log(this.$store.state.userList)
  //   //   // 把全局的 userlist 赋值给 tableData
  //   //   // this.tableData = this.$store.state.userList
  //   //   this.tableData = this.userList
  //   // })
  //   // this.getUserList().then(() => {
  //   //   this.tableData = this.userList;
  //   //
  //   //   // 这样可以删选出来年龄大于 20 的，此外还可以用 vuex 中的 getter
  //   //   // this.newtableData = this.userList.filter(v => v.age > 20)
  //   //
  //   //   // 这样虽然可以全局获取，但是数据多的话写起来太麻烦，可以利用 mapGetters 辅助函数
  //   //   // this.newtableData = this.$store.getters.vipUsers
  //   //
  //   //   // this.newtableData = this.vipUsers
  //   // });
  //   console.log(this.tableData)
  // },
  methods: {
    tableRowClassName({row, rowIndex}) {
        if (row.用户状态 === 0) {
          console.log(row)
          return 'warning-row';
        } else if (row.用户状态 === 1) {
          return 'success-row';
        }
        return '';
      },
    ...mapActions({
      getUserList: "getUserList",
      // getUserStatusList: "getUserStatusList",
    }),
    rowClick(row, event, column) {
      this.$router.push('/user/edit/' + row.id)
    },
    handleEidt(userID) {
      console.log('修改用户ID', userID)
      this.$router.push('/user/edit/' + userID)
    },
    handleDel(userID) {
      console.log('删除ID', userID)
      this.axios.delete('/api/user/' + userID + '/').then(response => {
        console.log(response)
        this.$message.success("删除用户成功")

      }).catch(reason => {
        console.log(reason)
        this.$message.error("删除用户失败", reason)
      })
      this.getUserList()
    },
    addUser() {
      this.$router.push('useradd')
    },

  },
  computed: {
    ...mapState({
      userlist: state => state.userlist,
      // userStatusList: state => state.userStatusList,
    }),
  },
};
</script>

<style>
.el-table .warning-row {
    background: #fde6f5;
  }

  .el-table .success-row {
    background: #edf9eb;
  }
</style>
